<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>经验值</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	input{

		outline:none;
	}

	</style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <div class="title">经验值</div>
</div>
<div id="app" v-cloak style="padding-top:60px;">
    <div class="people-number">
        <div class="total-value" style="padding:0 15%;height: 88px;">
            <div class="character-number-one-two" style="margin:20px 0 18px 0;font-size:12px;font-weight:bold;">
                <div class="character-number-title">当前等级:&nbsp;LV{{experience_list.level}}</div>
                <div class="character-number-title">{{experience_list.empiricalValue}}/{{experience_list.needVitalityValue}}</div>
            </div>
            <div class="character-number-one">
                <div class="progress-bar" style="padding:1px;">
            <span class="progressing" v-bind:style=" 'width:' + (experience_list.empiricalValue/experience_list.needVitalityValue)*100 +'%' ">
            </span>
                </div>
            </div>
        </div>
    </div>
    <div class="form-exp">
      <table border="1" cellspacing="0" style="text-align: center;width: 100%">
        <tr style="height:36px; background-color:#F7F4F2;font-size:12px;">
          <td>等级</td>
          <td>要求</td>
          <td>可交易数</td>
          <td>交易手续费</td>
        </tr>
        <tr style="height:36px;color:#999;font-size:12px;" v-for="(list,index) in experience_list.list">
          <td>{{list.empiricalName}}</td>
          <td>{{list.remarks}}</td>
          <td>{{list.transactionValue}}</td>
          <td>{{list.transactionFee}}%</td>
        </tr>
      </table>
    </div>
    <div class="explain">
      <div class="exp-method">增加经验值的方法：</div>
      <div style="font-size:12px;">1、每成功<span style="color:#F95656;">邀请</span>一名实名认证的好友获得50经验。</div>
      <div style="font-size:12px;">2、使用钻石<span style="color:#F95656;">兑换任务</span>,也会增加和消耗钻石等额的经验</div>

    </div>
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>

<script>
	var vm,
		wx,
        experience_list,
	apiready = function () {
		setBSImg();
        showProgress();
		new Vue({
			el: '#blank'
		})
		wx = api.require('wx');
		// setBSImg();
        var data = {
            wxOpenId:getPrefs('openid'),
            token:getPrefs('token'),
        };
        var callback=function(ret){
            experience_list = ret.content;
            console.log(JSON.stringify(experience_list));
            initApp();
        }
        pinet.post(APIURLP+'/play/user/myEmpiricValue',data, callback);
		api.parseTapmode();
	};

	function initApp() {
		// var isBigImg = Vue.BSImg == 'big';
		vm = new Vue({
			el: '#app',
			data: {
                experience_list:experience_list,
			},
			computed: {

			},
			methods: {

			},
			watch: {

			},
		})
	}


</script>

</html>
